<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首页</title>
    <!-- jquery - boot -库文件 -->
    <script src="__PUBLIC__/script/jquery.1.11.1.js"></script>
    <script src="__PUBLIC__/script/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/reset.css">
    <!-- Bootstrap -->
    <link href="__PUBLIC__/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap -->

    <!-- 自定义 css -->

    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/common.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/style.css">
    <!-- end easyui -->
    <!-- datetimepicker -->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="__PUBLIC__/script/html5shiv.js"></script>
    <script src="__PUBLIC__/script/respond.js"></script>
    <![endif]-->
    <style>
        .showdata{}
        .showdata h2{text-align: center;padding:20px 0;}
        .dstable{border:1px solid #666;padding:0;box-shadow: 0 0 10px #999;background:#fff;padding-bottom:10px;height:390px;}
        .dstable li{line-height:25px ;height:;padding-left:10px;padding-top:5px;padding-bottom:px;border-bottom:1px solid #efefef;}
        .dstable li.thdd{border-bottom: 1px solid #999;background:#f2f2f2;padding-bottom:5px;position:relative;}
        .alertbox{width:20px;height:20px;position:absolute;left:25px;top:25px;}
        .alertbox .isok{width:20px;height:20px;background:#77ef74;border:1px solid green;border-radius:10px;
            animation:mask_fadeout 1s infinite;
            -moz-animation:mask_fadeout 1s infinite; /* Firefox */
            -webkit-animation:mask_fadeout 1s infinite; /* Safari and Chrome */
            -o-animation:mask_fadeout 1s infinite; /* Opera */}
        .alertbox .notok{width:20px;height:20px;background:#ff4e4e;border:1px solid red;border-radius:10px;
            animation:mask_fadeout 0.5s infinite;
            -moz-animation:mask_fadeout 0.5s infinite; /* Firefox */
            -webkit-animation:mask_fadeout 0.5s infinite; /* Safari and Chrome */
            -o-animation:mask_fadeout 0.5s infinite; /* Opera */}

        /*maskfadeout*/
        @keyframes mask_fadeout
        {from {opacity:0.3;transform:scale(0.8)}
            to {opacity:1;transform:scale(1)}}
        @-moz-keyframes mask_fadeout /* Firefox */
        {from {opacity:0.3;transform:scale(0.8)}
            to {opacity:1;transform:scale(1)}}
        @-webkit-keyframes mask_fadeout /* Safari 和 Chrome */
        {from {opacity:0.3;transform:scale(0.8)}
            to {opacity:1;transform:scale(1)}}
        @-o-keyframes mask_fadeout /* Opera */
        {from {opacity:0.3;transform:scale(0.8)}
            to {opacity:1;transform:scale(1)}}

        .dstable li.thdd h3{font-size: 22px;color:#333;margin-bottom:0;margin-top:10px;text-align: center;}
        .dstable li.thdd span{font-size: 16px;color:#999;display:block;text-align: center;width:100%}
        .dstable li span{display:block;float:left;}
        .dstable li span.title{width:90px;margin-right:10px;text-align: right;}
        .dstable li span.val_{width:100px;float:left;margin-right:10px;text-align: center;color:red;}
        /*qxdata*/
        .qxdata{padding-top:30px;}
        .qxdata .colss{border:1px solid #666;height:50px;line-height: 50px;background:#fff;box-shadow: 0 0 10px #999;}
        .qxdata .colss.tit{font-size:19px;text-align: center;color:#333;font-weight: bold;}

        .qxdata .colss.list li{display:inline-block;}
        .qxdata .colss.list li span{display:block;float:left;}
        .qxdata .colss.list li span.title{width:50px;margin-right:10px;text-align: right;}
        .qxdata .colss.list li span.val_{width:60px;float:left;margin-right:10px;text-align: center;color:red;}
    </style>
</head>

<body>
<include file="Public/header" />
<div class="container showdata">
    <h2>泰安市汶河人工湿地水质净化自动监测</h2>
    <div class="row">
        <!-- 湿地入口数据 -->
        <div class="col-md-4">
            <ul class="dstable">
                <!-- head -->
                <li class="thdd clearfix">
                    <div class="alertbox">
                        <div id="a" class="isok"></div>
                    </div>
                    <h3>湿地入口数据</h3>
                    <span>仪器测量中</span>
                </li>
                <!-- listbody -->
                <li class="clearfix">
                    <span class="title">化学需氧量：</span>
                    <span class="val_">{$rukou.cod}</span>
                    <span class="dwei">mg/L</span>
                </li>
                <li class="clearfix">
                    <span class="title">氨氮：</span>
                    <span class="val_">{$rukou.nh3-n}</span>
                    <span class="dwei">mg/L</span>
                </li>
                <li class="clearfix">
                    <span class="title">总磷：</span>
                    <span class="val_">{$rukou.tp}</span>
                    <span class="dwei">mg/L</span>
                </li>
                <li class="clearfix">
                    <span class="title">总氮：</span>
                    <span class="val_">{$rukou.tn}</span>
                    <span class="dwei">mg/L</span>
                </li>
                <li class="clearfix">
                    <span class="title">悬浮物：</span>
                    <span class="val_">{$rukou.ss}</span>
                    <span class="dwei">mg/L</span>
                </li>
                <li class="clearfix">
                    <span class="title">河面水位：</span>
                    <span class="val_">{$rukou.hdsw}</span>
                    <span class="dwei">m</span>
                </li>
                <li class="clearfix">
                    <span class="title">实时流量：</span>
                    <span class="val_">{$rukou.ssll}</span>
                    <span class="dwei">m³/秒</span>
                </li>
                <li class="clearfix">
                    <span class="title">昨日流量：</span>
                    <span class="val_">{$rukou.zrll}</span>
                    <span class="dwei">m³/天</span>
                </li>
                <li class="clearfix">
                    <span class="title">总累计流量：</span>
                    <span class="val_">{$rukou.zljll}</span>
                    <span class="dwei">m³</span>
                </li>
                <li class="clearfix">
                    <span class="title">水温：</span>
                    <span class="val_">{$rukou.wt}</span>
                    <span class="dwei">℃</span>
                </li>
            </ul>
        </div>
        <!-- 湿地出口数据 -->
        <div class="col-md-4">
            <ul class="dstable">
                <!-- head -->
                <li class="thdd clearfix">
                    <div class="alertbox">
                        <div id="b" class="isok"></div>
                    </div>
                    <h3>湿地出口数据</h3>
                    <span>仪器测量中</span>
                </li>
                <!-- listbody -->
                <li class="clearfix">
                    <span class="title">化学需氧量：</span>
                    <span class="val_">{$chukou.cod}</span>
                    <span class="dwei">mg/L</span>
                </li>
                <li class="clearfix">
                    <span class="title">氨氮：</span>
                    <span class="val_">{$chukou.nh3-n}</span>
                    <span class="dwei">mg/L</span>
                </li>
                <li class="clearfix">
                    <span class="title">总磷：</span>
                    <span class="val_">{$chukou.tp}</span>
                    <span class="dwei">mg/L</span>
                </li>
                <li class="clearfix">
                    <span class="title">总氮：</span>
                    <span class="val_">{$chukou.tn}</span>
                    <span class="dwei">mg/L</span>
                </li>

                <li class="clearfix">
                    <span class="title">实时流量：</span>
                    <span class="val_">{$chukou.ssll}</span>
                    <span class="dwei">m³/秒</span>
                </li>
                <li class="clearfix">
                    <span class="title">昨日流量：</span>
                    <span class="val_">{$chukou.zrll}</span>
                    <span class="dwei">m³/天</span>
                </li>
                <li class="clearfix">
                    <span class="title">总累计流量：</span>
                    <span class="val_">{$chukou.zljll}</span>
                    <span class="dwei">m³</span>
                </li>

            </ul>
        </div>
        <!-- 汶河水质数据 -->
        <div class="col-md-4">
            <ul class="dstable">
                <!-- head -->
                <li class="thdd clearfix">
                    <div class="alertbox">
                        <div id="c" class="isok"></div>
                    </div>
                    <h3>汶河水质数据</h3>
                    <span>仪器测量中</span>
                </li>
                <!-- listbody -->
                <li class="clearfix">
                    <span class="title">高锰酸盐指数：</span>
                    <span class="val_">{$shuizhi.codmn}</span>
                    <span class="dwei">mg/L</span>
                </li>
                <li class="clearfix">
                    <span class="title">氨氮：</span>
                    <span class="val_">{$shuizhi.nh3-n}</span>
                    <span class="dwei">mg/L</span>
                </li>
                <li class="clearfix">
                    <span class="title">总磷：</span>
                    <span class="val_">{$shuizhi.tp}</span>
                    <span class="dwei">mg/L</span>
                </li>
                <li class="clearfix">
                    <span class="title">总氮：</span>
                    <span class="val_">{$shuizhi.tn}</span>
                    <span class="dwei">mg/L</span>
                </li>
                <li class="clearfix">
                    <span class="title">pH：</span>
                    <span class="val_">{$shuizhi.ph}</span>
                    <span class="dwei"></span>
                </li>
                <li class="clearfix">
                    <span class="title">溶解氧：</span>
                    <span class="val_">{$shuizhi.do}</span>
                    <span class="dwei">mg/L</span>
                </li>
                <li class="clearfix">
                    <span class="title">电导率：</span>
                    <span class="val_">{$shuizhi.cond}</span>
                    <span class="dwei">us/cm</span>
                </li>
                <li class="clearfix">
                    <span class="title">浊度：</span>
                    <span class="val_">{$shuizhi.tub}</span>
                    <span class="dwei">NTU</span>
                </li>

                <li class="clearfix">
                    <span class="title">水温：</span>
                    <span class="val_">{$shuizhi.wt}</span>
                    <span class="dwei">℃</span>
                </li>
            </ul>
        </div>
    </div>
    <!-- 湿地气象数据 -->
    <div class="row">
        <div class="col-md-12">
            <div class="qxdata">
                <div class="col-md-2 colss tit" style="border-right:none;">
                    <div class="alertbox" style="top:15px;left:10px;">
                        <div id="f" class="isok"></div>
                    </div>
                    湿地气象数据</div>
                <div class="col-md-10 colss list">


                    <li class="clearfix">
                        <span class="title">温度：</span>
                        <span class="val_">{$qixiang.wd}</span>
                        <span class="dwei">℃</span>
                    </li>
                    <li class="clearfix">
                        <span class="title">湿度：</span>
                        <span class="val_">{$qixiang.sd}</span>
                        <span class="dwei">％</span>
                    </li>
                    <li class="clearfix">
                        <span class="title">风速 ：</span>
                        <span class="val_">{$qixiang.fs}</span>
                        <span class="dwei">MPH</span>
                    </li>
                    <li class="clearfix">
                        <span class="title">降雨量：</span>
                        <span class="val_">{$qixiang.jyl}</span>
                        <span class="dwei">mm/min</span>
                    </li>
                    <li class="clearfix">
                        <span class="title">风向：</span>
                        <span class="val_">{$qixiang.fx}</span>
                        <span class="dwei">度</span>
                    </li>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="height:50px"></div>
<include file="Public/footer" />
<script>

    $(document).ready(function() {
        //初始化页面
        $('#index').addClass('on');
    });
    // $(function(){
    //     var b = document.getElementById('aa').value;
    //     console.log(b);
    //     if (b<0){
    //         alert('已超过四小时未上传数据，请联系管理员');
    //     }
    //     else{
    //         setTimeout(loaddg,3000000);
    //     }
    // });
    $(function () {
        var option = {
            type: "POST",
            url: "{:U('shuaxin')}",
            success: function (data) {
                if (data<0){
                    alert('已超过四小时未上传数据，请联系管理员');
                }
                else if (data=='a'){
                    alert('上传时间不同步，请联系管理员');
                }
                else{
                    setTimeout(loaddg,data);
                }
            }
        };
        $.ajax(option)
    });
    $(function () {
        var option = {
            type: "POST",
            url: "{:U('xinhao1')}",
            success: function (data) {
                //document.getElementById('f').classname = data;
                $("#a").removeClass("isok");
                $("#a").addClass(data['a']);
                $("#b").removeClass("isok");
                $("#b").addClass(data['b']);
                $("#c").removeClass("isok");
                $("#c").addClass(data['c']);
                $("#f").removeClass("isok");
                $("#f").addClass(data['f']);
            }
        };
        $.ajax(option)
     });
    function loaddg(){
        window.location.reload(true);
    }
</script>
</body>

</html>